<template>
    <div class="centered-content">
    <el-card class="el-card">
        <el-upload class="upload-demo" drag multiple @change="handleFileUpload">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              Drop file here or <em>click to upload</em>
            </div>
          </el-upload>
        <el-form :model="bookInfo" class="bookForm">
            <el-form-item label="种类">
            <el-dropdown>
            <el-button type="primary">
                {{ categoryBtn }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
                <el-dropdown-menu>
                <el-dropdown-item v-for="category in categories" :key="category" :command="category" @click="selectCategory(category)">
                {{ category }}
                </el-dropdown-item>
                </el-dropdown-menu>
            </template>
            </el-dropdown>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="bookInfo.bookName" placeholder="bookName" style="width: 500px;"/>
            </el-form-item>
            <el-form-item label="作者">
                <el-input v-model="bookInfo.author" placeholder="author" style="width: 500px;"/>
            </el-form-item>
            <el-form-item label="数量">
                <el-input v-model="bookInfo.quantity" placeholder="quantity" style="width: 500px;"/>
            </el-form-item>
            <el-form-item label="ISBN">
                <el-input v-model="bookInfo.ISBN" placeholder="ISBN" style="width: 500px;"/>
            </el-form-item>
            <el-form-item label="拥有者">
                <el-input v-model="bookInfo.owner" disabled="true" placeholder="owner"/>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="bookInfo.description" type="textarea" placeholder="description"/>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="bookInfo.price" placeholder="price"/>
            </el-form-item>
            <el-form-item label="press">
                <el-input v-model="bookInfo.press" placeholder="press"/>
            </el-form-item>
        </el-form>
        <el-row class="button">
            <el-button plain @click="confirmToShelve" type="primary">确认上架</el-button>
            <el-button plain @click="back=>{this.$router.back()}" type="primary">返回</el-button>
        </el-row>
    </el-card>
    </div>
</template>

<script>
import axios, { AxiosError } from 'axios'

export default {
    name:   'GoShelve',
    data(){
        return{
            bookInfo:'',
            categoryBtn:'',
            categories:''

        }
    },
    methods:{
        async confirmToShelve(){
            const [err,result] = await this.promise_error_process(this.putOnSaleByAjax())
            if(err){
                console.log(err)
            }else{
                console.log(result)
                ElMessageBox.alert('上架成功，是否返回上架列表？', '提示框', {
                // autofocus: false,
                confirmButtonText: '返回',
                callback: (action) => {
                    ElMessage({
                        type: 'info',
                        message: `action: ${action}`,
                    })
                    if(action === 'confirm'){
                        this.$router.back();
                    }
                },
            })
            }
        },
        selectCategory(category) {
            this.categoryBtn = category;
            this.bookInfo.category = category
        },
        //使用结构赋值进行异常处理
        promise_error_process(promise){
            return promise.then(data=>[null,data])
                            .catch(err=>[err,null])
        },
        async getCategoiesByAjax(){
            const response = await axios({
            url				: 'http://127.0.0.1:8080/api/books/category',
            method			: 'GET',
            withCredentials : true
          })
          return response
        },
        async getCategoies(){
            const [err,result] = await this.promise_error_process(this.getCategoiesByAjax())
            if(err){
                console.log('请求异常')
            }else{
                console.log(result)
                this.categories = result.data.data.categoryNames
                this.categoryBtn = this.categories[0]
            }
        },
        async putOnSaleByAjax(){
            const response = await axios({
            url				: 'http://127.0.0.1:8080/api/books/ponsale',
            method			: 'POST',
            withCredentials : true,
            headers			: {
    				'Content-Type'	: 'application/json'
  					},
					data	: this.bookInfo
            })
          return response
        },

        
    },
    created(){
        this.getCategoies()
    }
}
</script>

<style scoped>
.el-card{
    width: 70%;
}
.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.button{
    justify-content: center;
  align-items: center;
}
.upload-demo{
    position: absolute;
    width: 200px;
    height: 200px;
    margin-left: 600px;
    margin-top: 20px;

}
</style>